<template>
  <div>
    <el-input
      v-model="input1"
      placeholder="小区名称"
      style="width: 300px"
    ></el-input>
    <el-input
      v-model="input"
      placeholder="单元名称"
      style="width: 300px; margin-left: 10px"
    ></el-input>

    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="建设时间"
      style="margin-left: 10px; width: 300px"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
    <el-select v-model="value" placeholder="选择状态" style="margin-left: 10px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button
      type="primary"
      icon="el-icon-search"
      style="margin-left: 50px"
      @click="search"
    ></el-button>
    <el-button
      type="success"
      icon="el-icon-plus"
      style="width: 100px"
      @click="luru"
      >录入</el-button
    >
    <el-button
      type="primary"
      icon="el-icon-refresh-right"
      style="width: 100px"
      @click="reset"
      >重置</el-button
    >
    <el-table :data="tableData" style="width: 100%; margin-top: 20px">
      <el-table-column prop="communityname" label="小区名称"> </el-table-column>
      <el-table-column prop="unitname" label="单元名称"> </el-table-column>
      <el-table-column prop="unitnum" label="栋数"> </el-table-column>
      <el-table-column prop="createtime" label="建设时间">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createtime) }}
        </template>
      </el-table-column>
      <el-table-column prop="unitstatus" label="状态">
        <template slot-scope="scope">
          {{ scope.row.unitstatus === 1 ? "已建成" : "未建成" }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="info" @click="xiangqing(scope.row)">详情</el-button>
          <el-button type="danger" @click="back(scope.row)">归档</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 10,
      current: 1,
      total: 0,
      tableData: [],
      input: "",
      input1: "",
      value1: "",
      options: [
        {
          value: "1",
          label: "已建成",
        },
        {
          value: "2",
          label: "未建成",
        },
      ],
      value: "",
      Data: [],
    };
  },
  methods: {
    async indexlist() {
      let res = await this.$axios.get(
        `http://community.byesame.com/house/gethouseList?pageNum=${
          this.page
        }&currPage=${this.current - 1}`
      );
      console.log(res);
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    async search() {
      let res = await this.$axios.get(
        `http://community.byesame.com/house/searchList?communityname=${this.input1}&unitname=${this.input}&createDt=${this.value1}&value=${this.value}&currPage=${this.current}&pageNum=${this.page}&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMjAyNTEwMjQwODUxMDY5ODE1MDEuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3NjEyNjgxNTAsImV4cCI6MTc2MTM1NDU1MH0.Q8Fy8UVNjf-u9ZwGdan7NtDqbPOIIuydoiwAwyV9l48`
      );
      console.log(res);
      this.tableData = res.data.data;
      this.total = res.data.total;
      console.log(this.value);
    },
    back(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$axios.get(
            `http://community.byesame.com/house/delunitList?id=${row.id}&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMjAyNTEwMjQwODUxMDY5ODE1MDEuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3NjEyNjgxNTAsImV4cCI6MTc2MTM1NDU1MH0.Q8Fy8UVNjf-u9ZwGdan7NtDqbPOIIuydoiwAwyV9l48`
          );
          console.log(res);
          this.indexlist();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    reset() {
      this.input1 = "";
      this.input = "";
      this.value1 = "";
      this.value = "";
    },
    luru() {
      this.$router.replace("luru");
    },
    async xiangqing(row) {
      let res = await this.$axios.get(
        `http://community.byesame.com/house/getDetailId?id=${row.id}&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMjAyNTEwMjQxODAzMjU4MTUxNDMwLmpwZyIsInR5cGUiOiIxIiwiaWF0IjoxNzYxMzExNjA3LCJleHAiOjE3NjEzOTgwMDd9.-hC63jWmHcgQZg_ZtWtaJJQacItnW_0z_EOXD3PXkCo`
      );
      console.log(res);
      this.Data = res.data[0];
      localStorage.setItem("communityname", this.Data.communityname);
      localStorage.setItem("unitname", this.Data.unitname);
      localStorage.setItem("unitnum", this.Data.unitnum);
      localStorage.setItem("unitnum", this.Data.unitnum);
      localStorage.setItem("unitstatus", this.Data.unitstatus);
      localStorage.setItem("unitcontext", this.Data.unitcontext);
      localStorage.setItem("id", this.Data.id);
      console.log(res.data);
      console.log(this.Data.communityname);
      console.log(this.Data.unitname);

      console.log(this.Data);

      this.$router.replace("xiangqing");
    },
    formatDate(rawTime) {
      // 1. 处理空值：如果没有时间，返回“暂无”
      if (!rawTime) return "暂无";

      // 2. 创建 Date 对象（兼容时间戳、字符串格式）
      const date = new Date(rawTime);

      // 3. 处理无效时间（如格式错误）
      if (isNaN(date.getTime())) return "格式错误";

      // 4. 提取年、月、日（月和日补零，确保格式统一，如 09 而非 9）
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需 +1
      const day = String(date.getDate()).padStart(2, "0");
      const hour = String(date.getHours()).padStart(2, "0");
      const minute = String(date.getMinutes()).padStart(2, "0");
      const second = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page = val;
      this.current = 1;
      this.indexlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.indexlist();
    },
  },
  created() {
    this.indexlist();
  },
};
</script>
